import React from "react";
import {useState} from "react";
import {RegisterScreen} from "./register";
import {LoginScreen} from "./login";
import {Button, Card, Divider, Typography} from "antd";
import styled from "@emotion/styled";
import dog from 'asset/dog.svg'

export const UnathenticatedApp = () =>{
    const [isRegister, setIsRegister] = useState(false)
    const [error, setError] = useState<Error | null>(null)
    return <Container>
        <Header/>

        <ShadowCard>
            {error ? <Typography.Text type={'danger'}>{error.message}</Typography.Text> : null}
        {
            isRegister ? <RegisterScreen onError = {setError}/> : <LoginScreen onError = {setError}/>
        }
        <Divider/>
        <Button type={"link"} onClick={() => setIsRegister(!isRegister)}>切换到{isRegister ? '已有账号？直接登录' : '注册新账号'}</Button>
        </ShadowCard>
    </Container>
}

const Container = styled.div`
  display:flex;
flex-direction: column;
align-items: center;
min-height: 100vh;`

const ShadowCard = styled(Card)`
width: 40rem;
min-height: 56rem;
padding: 3.2rem 4rem;
border-radius: 0.3rem;
box-sizing: border-box;
box-shadow: rgba(0,0,0,0.1) 0 0 10px;
text-align: center;`

const Header = styled.header`
background: url(${dog}) no-repeat center;
  padding: 5rem 0;
  background-size: 8rem;
  width: 100%;
`